﻿@using System.Collections.ObjectModel
@using System.Globalization
@using TrainingManagerSystem.WebUI.Models
@using TrainingManagerSystem.WebUI.TrainingManagerSystemService
@model List<LanguageScore>
@{
    ViewBag.Title = "Index";
}
@functions
{
    private string ConvertDate(DateTime dateTime)
    {
        string temp;
        switch (dateTime.Month)
        {
            case 1:
                temp = "Jan";
                break;
            case 2:
                temp = "Feb";
                break;
            case 3:
                temp = "Mar";
                break;
            case 4:
                temp = "Apr";
                break;
            case 5:
                temp = "May";
                break;
            case 6:
                temp = "Jun";
                break;
            case 7:
                temp = "Jul";
                break;
            case 8:
                temp = "Aug";
                break;
            case 9:
                temp = "Sep";
                break;
            case 10:
                temp = "Oct";
                break;
            case 11:
                temp = "Nov";
                break;
            case 12:
                temp = "Dec";
                break;
            default:
                temp = "";
                break;
        }
        temp = dateTime.Day.ToString(CultureInfo.InvariantCulture) + "-" + temp + "-" + dateTime.Year.ToString(CultureInfo.InvariantCulture);
        return temp;
    }
}
<div id="body">
    <script src="~/Content/Scripts/jquery-1.7.1.min.js"></script>
    <link href="~/Content/Css/languageScore.css" rel="stylesheet" />
    <script src="~/Content/Scripts/convertDatetimeJson.js"></script>

    <script src="~/Content/Scripts/languageScore.js"></script>
    <link href="~/Content/Css/css.accountCourse.css" rel="stylesheet" />
    <link href="/Content/Css/jquery.dataTables.css" rel="stylesheet" />
    <div>
        <div id="content-left" class="float-left">
            <div class="title-nav">Language Score</div>
            <ul class="treeview" id="tree">
                <li><a href="#" data-id="">All</a></li>
                @foreach (var item in (List<LanguageType>)ViewBag.LanguageType)
                {
                    <li><a href="#" data-id="@item.LanguageTypeId">@item.LanguageName</a>
                    </li>
                }
            </ul>
        </div>
        <div id="content-right" class="float-left">
            <div class="title-view bold">View Language Score</div>
            <div class="div-search">
                <table width="100%">
                    <tr>
                        <td class="label">Selection Search</td>
                        <td>
                            <input type="radio" name="chooseScore" value="true" />
                            <p style="display: inline">Final Score</p>
                            &nbsp;&nbsp;
                            <input type="radio" name="chooseScore" value="false" />
                            <p style="display: inline">All</p>
                        </td>
                        <td class="label">Account Name</td>
                        <td>
                            <input type="text" id="accountName" />
                        </td>
                    </tr>
                    <tr>
                        <td class="label">Score</td>
                        <td>
                            <input type="text" id="score" />
                        </td>
                        <td class="label">Full Name</td>
                        <td>
                            <input type="text" id="fullName" />
                        </td>
                    </tr>
                    <tr>
                        <td class="label">Status</td>
                        <td>
                            <select id="statusAccount">
                                <option value="0" selected="selected">All</option>
                                @foreach (var item in (List<StatusAccount>)ViewBag.Status)
                                {
                                    <option value="@item.StatusAccountId">@item.StatusAccountName</option>
                                }
                            </select>
                        </td>
                        <td class="label">Department</td>
                        <td>
                            <select id="department">
                                <option value="0" selected="selected">All</option>
                                @foreach (var item in (List<Department>)ViewBag.Department)
                                {
                                    if(item.ParentDepartmentId==0)
                                    {
                                        <option value="@item.DepartmentId">@item.DepartmentFullName</option>
                                        foreach (var ite in (List<Department>)ViewBag.Department)
                                        {
                                            if (ite.ParentDepartmentId==item.DepartmentId)
                                            {
                                                <option value="@ite.DepartmentId">...@ite.DepartmentFullName</option>
                                                foreach (var i in (List<Department>)ViewBag.Department)
                                                {
                                                    if (i.ParentDepartmentId == ite.DepartmentId)
                                                    {
                                                        <option value="@i.DepartmentId">......@i.DepartmentFullName</option>
                                                    }
                                                }
                                            }
                                        }    
                                    }
                                }
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="float-right">
                <button type="button" class="btn" id="search">
                    <span class="i-invertedSearchLoupe">SEARCH</span>
                </button>
            </div>
            <div class='clear-fix'><span id='setting'>Table configuration</span></div>
            <div class="clear-fix"></div>
            <div id="list-search">
                <table id="dataTables" class="sortable">
                    <thead>
                        <tr>
                            <th>Account Name
                            </th>
                            <th>Full Name
                            </th>
                            <th>Department Name
                            </th>
                            <th>Language Name
                            </th>
                            <th>Score
                            </th>
                            <th>Date
                            </th>
                            <th>Note
                            </th>
                        </tr>
                    </thead>
                    <tfoot></tfoot>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td><a class="acc" href="#" data-id="@item.LanguageScoreId" data-accountName="@item.AccountName">@item.AccountName</a></td>
                                <td>@item.FullName</td>
                                <td>@item.DepartmentName</td>
                                <td>@item.LanguageName</td>
                                <td class="text-right">@item.Score</td>
                                <td class="text-right">@if (item.Date != null)
                                                       {
                                    @item.Date.Value.ToString("dd-MMM-yyyy")
                                                       }
                                </td>
                                <td>@item.Note</td>
                                <td style="display: none">@item.TotalRow</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="clear-fix"></div>
    </div>


    <div id="details">
        <div id="acTitle" class="title-view">Language Score Details</div>
        <div class="div-search" id="history-result">
        </div>
        <br />
        <div class="title-view bold" style="margin-left: 10px; margin-bottom: -5px;">History</div>
        <div id="list-history">
        </div>
        <span id="btns">
            <input type="button" value="Close" class="btn" />
        </span>
    </div>
    <div class="clear-fix"></div>
    <div id="pop">
        <div class='acTitle title-view'>Selected Fields</div>
        <table id='selectedFileds'>
            <tr>
                <td>
                    <input type='checkbox' id='selectAll' />
                    Select all</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Account Name</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    FullName</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Department Name</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Language Name</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Score</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Date</td>
                <td>
                    <input type='checkbox' class='fields' />
                    Note</td>
            </tr>
        </table>
        <div class='btns'>
            <input type='button' value='Cancel' id='cancelBtn' /><input type='button' value='Accept' id='changeFields' />
        </div>
    </div>
    <div class='clear-fix'></div>
</div>
@section scripts
{
    <script src="~/Content/Scripts/languageScore.js"></script>
    <script src="~/Content/Scripts/jquery.commonFunctions.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#tree li a").on("click", function () {
                $("#tree li a").removeClass("selected");
                $(this).addClass("selected");
            });

            $('#details').hide();
            $('#btns input').click(function () {
                $('#details').bPopup().close();
            });

            $("#tree li a").on("click", function () {
                getDataFromDatabase('dataTables', 1, 80);
            });

            $("#search").on("click", function () {
                getDataFromDatabase('dataTables', 1, 80);
            });

            $("#dataTables tbody tr td a").click(function () {
                var accountName = $(this).attr("data-accountName");
                var languageId = $(this).attr("data-id");
                details(languageId);
                history(accountName);
                $("#details").bPopup();
            });
            $("#pop").hide();
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            Initial();
            window.hidden = getColumnsHide('fields');
            window.objTable = CreateDataTableById('dataTables', window.hidden);
            ChangeTableConfiguration('changeFields', 'dataTables', 'fields', 'wrapper', 'pop', 0, $('#dataTables_length option:selected').text(), objTable.fnGetData(0)[7]);
            $('.wrapper').addClass('configurationPaging');
            configurationPaging('dataTables', 0, $('#dataTables_length option:selected').text(), objTable.fnGetData(0)[7]);
        });
    </script>
}

